<template>
	<div class="add-app">
		<!--滚动内容 start-->
		<el-scrollbar class="app-container-scroll-bar">
		
			<pageTitle :hasBack="true" :title="pageTitle" ></pageTitle>
			
			<el-steps :active="nowStep" align-center finish-status="success">
			  <el-step title="步骤1" description=""></el-step>
			  <el-step title="步骤2" description=""></el-step>
			  <el-step title="步骤3" description=""></el-step>
			</el-steps>
			
			<div style="width:80%;min-width:780px;margin: auto;margin-top: 20px;">
				<step1 
					ref="step1" 
					:deployType="deployType" 
					@submit="step1Submit" 
					v-show="nowStep==0">
				</step1>
				<step2 
					ref="step2" 
					:deployType="deployType" 
					@submit="step2Submit" 
					@goPrev="goPrev" 
					v-show="nowStep==1">
				</step2>
				<step3 
					ref="step3" 
					:deployType="deployType" 
					@submit="step3Submit"  
					@goPrev="goPrev" 
					v-show="nowStep==2">
				</step3>
			</div>
			
    </el-scrollbar>
    <!--滚动内容 end -->
		
		
		<!--弹窗内容 start-->
		<div class="app-output-window">
			
			
			
		</div>
		<!--弹窗内容 end-->
		
	</div>
</template>

<script>
	import pageTitle from "@/view/layout/components/content/pageTitle";
	import step1 from "./addApp/step1";
	import step2 from "./addApp/step2";
	import step3 from "./addApp/step3";
	import {build} from "@/service/swagger/AppBuilderController";
	
	export default {
	  components: {
	    pageTitle,
	    step1,
	    step2,
	    step3
	  },
	  data() {
	    return {
	    	pageTitle: "新建模板",
	    	deployType: this.$route.query.deployType,
	      nowStep : 0 ,
	      formData : {
	      	
	      },
	    };
	  },
	  methods: {
	    step1Submit(v){
	    	console.log("step1数据：",{...v})
	    	this.nowStep = 1 ;
	    	Object.assign(this.formData,v)
	    	console.log("this.formData：",{...this.formData})
	    	this.$refs.step2.init(this.formData);
	    },
	    step2Submit(v){
	    	console.log("step2数据：",{...v})
	    	this.nowStep = 2 ;
	    	Object.assign(this.formData,v)
	    	this.$refs.step3.init(this.formData)
	    },
	    step3Submit(v){
	    	Object.assign(this.formData,v)
	    	console.log("step3数据：",v)
	    	
	    	this.creatTemplate();
	    },
	    
	    creatTemplate(){
	    	build({
	    		templateType : 1 ,
	    		
	    		//gitAddress : this.formData.gitAddress,
	    		resourceUrl : ( this.formData.repositoryType == "file" ? "file://" : "") + this.formData.resourceUrl,
	    		passWord : this.formData.paasWord,
	    		userName : this.formData.userName,
	    		branch :this.formData.branch,
	    		
	    		appType : this.formData.appType,
	    		appVersion : this.formData.appVersion,
	    		deployType : this.deployType,
	    		description : this.formData.description,
	    		
	    		imageRepository : this.formData.imageRepository,
	    		name : this.formData.name,
	    		relaInfo : this.formData.relaInfo.filter(el=>el.relaTemplateId != ''),
	    		
	    		repositoryType :this.formData.repositoryType,
	    		
	    		//fileId : this.formData.fileId,
	    		//fileMd5 : this.formData.fileMd5,
	    		
					// spec : this.formData.spec,
					deployInstCounts:this.formData.spec.instCounts,
					deployModel:this.formData.spec.deployModel,
					// appType:this.formData.spec.appType,

	    		templateConfigs : this.formData.templateConfigs.filter(el=>el.configSourceFile != ''),
	    		// templateType : this.formData.templateType,
	    		// templateVersion : this.formData.templateVersion,
	    		varsInfo : this.formData.varsInfo.filter(el=>el.defaultValue != '' || el.varsName != ''),
	    	}).then(ret=>{
	    		this.$refs.step3.resetLoading()
	    		if(!ret.code&&ret.data){
	    			this.$router.push({
	    				path : {
	    					"1" : "/yy/rq", // 跳转容器列表
	    					"2" : "/yy/lyy", // 跳转裸应用列表
	    				}[this.deployType],
	    				query:{}
	    			})
	    		}
	    	})
	    },
	    
	    goPrev(){
	    	this.nowStep-- ;
	    },
	    
	    
	  }
	};
</script>

<style lang="scss">
	@import "../../../styles/variables.scss";
	
	.add-app {
		.el-alert.el-alert--info{
			margin-bottom: 20px;
			background: none ;
			line-height: 1.25;
			border: 1px solid $borderGrey;
		}
	}
</style>